
/*
 * @Author: YeMiao 
 * @Date: 2018-02-14 14:59:06 
 * @Last Modified by: YeMiao
 * @Last Modified time: 2018-02-25 15:29:22
 */

import { Component } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
import { NgxEchartsService } from 'ngx-echarts';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-main-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent  {
  title = '首页';
  echartsIntance;

  gridStyle = {
    width: '25%',
    textAlign: 'center',
  };
  
  constructor(private route: ActivatedRoute,
    private chart: NgxEchartsService) {
  }

  onChartInit(ec) {
    // 重新定位图表
    setTimeout(() => {
      ec.resize()
    },100)
  }

  chartOption = {
    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    dataset: {
      source: [
        ['2015', '2016', '2017', '2018'],
        [ 320, 220, 100, 156],
        [ 332, 182, 100, 120],
        [ 301, 191, 200, 111],
        [ 390, 234, 250, 155]
      ]
    },
    legend: {
      data: ['新增人数', '今日收益', '站内流量', '用户获益']
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        axisTick: {show: false},
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '新增人数',
        type: 'bar',
        barGap: 0,
        label: '新增人数',
        seriesLayoutBy: 'row',
      },
      {
        name: '今日收益',
        type: 'bar',
        label: '今日收益',
        seriesLayoutBy: 'row'
      },
      {
        name: '站内流量',
        type: 'bar',
        label: '站内流量',
        seriesLayoutBy: 'row'
      },
      {
        name: '用户获益',
        type: 'bar',
        label: '用户获益',
        seriesLayoutBy: 'row'
      }
    ]
  }
}
